<html>
	<head>
		<#assign path="${request.contextPath}"/>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<#include "include/lib.ftl"/>
		
		<!-- 图表..开始 -->
		<script src="${path}/js/lib/highcharts.js"></script>
		<script src="${path}/js/lib/exporting.js"></script>
		<!-- 图表..结束 -->
		<style>
			#container{height:100%;}
			h1{text-align:center;}
			#cen{margin-top:20%;display:none;}
			.totalDataText{font-size:16px;text-align:center;}
			#title{margin-bottom:20px;}
		</style>
	</head>
	<body>
	<#include "include/header.ftl"/>
		
		
		<div id="container">
			<div id="title" class="col-md-12">
				<h1>数据统计浏览</h1>
			</div>
			<!-- 数据统计部分...开始 -->
			<div class="totalData">
				<div id="totalday" class="col-md-3 col-xs-12">
					<div class="panel panel-primary">
						<div class="panel-heading">
							<h3 class="panel-title">本日收支</h3>
						</div>
						<div class="panel-body">
							<p class="totalDataText">
								<span style="color:#F0AD4E;font-weight:bold;">支出:</span>${totals.day.cost} &nbsp;&nbsp;
								<span style="color:#5CB85C;font-weight:bold;">收入:</span>${totals.day.income} &nbsp;&nbsp;
								<span style="color:#E61DDF;font-weight:bold;">结余:</span>${totals.day.income - totals.day.cost} &nbsp;&nbsp;
							</p>
						</div>
					</div>
				</div>
				<div id="totalweek" class="col-md-3 col-xs-12">
					<div class="panel panel-success">
						<div class="panel-heading">
							<h3 class="panel-title">本周收支</h3>
						</div>
						<div class="panel-body">
							<p class="totalDataText">
								<span style="color:#F0AD4E;font-weight:bold;">支出:</span>${totals.week.cost} &nbsp;&nbsp;
								<span style="color:#5CB85C;font-weight:bold;">收入:</span>${totals.week.income} &nbsp;&nbsp;
								<span style="color:#E61DDF;font-weight:bold;">结余:</span>${totals.week.income - totals.week.cost} &nbsp;&nbsp;
							</p>
						</div>
					</div>
				</div>
				<div id="totalmonth" class="col-md-3 col-xs-12">
					<div class="panel panel-info">
						<div class="panel-heading">
							<h3 class="panel-title">本月收支</h3>
						</div>
						<div class="panel-body">
							<p class="totalDataText">
								<span style="color:#F0AD4E;font-weight:bold;">支出:</span>${totals.month.cost} &nbsp;&nbsp;
								<span style="color:#5CB85C;font-weight:bold;">收入:</span>${totals.month.income} &nbsp;&nbsp;
								<span style="color:#E61DDF;font-weight:bold;">结余:</span>${totals.month.income - totals.month.cost} &nbsp;&nbsp;
							</p>
						</div>
					</div>
				</div>
				<div id="totalyear" class="col-md-3 col-xs-12">
					<div class="panel panel-warning">
						<div class="panel-heading">
							<h3 class="panel-title">本年收支</h3>
						</div>
						<div class="panel-body">
							<p class="totalDataText">
								<span style="color:#F0AD4E;font-weight:bold;">支出:</span>${totals.year.cost} &nbsp;&nbsp;
								<span style="color:#5CB85C;font-weight:bold;">收入:</span>${totals.year.income} &nbsp;&nbsp;
								<span style="color:#E61DDF;font-weight:bold;">结余:</span>${totals.year.income - totals.year.cost} &nbsp;&nbsp;
							</p>
						</div>
					</div>
				</div>
			</div>
			<!-- 数据统计部分...结束 -->
			
			<!-- 图表部分...开始 -->
			<div class="charts">
				<div class="col-sm-12 col-xs-12">
					<div class="panel panel-success">
						<div class="panel-heading">
							<h3 class="panel-title">本月支出分布图</h3>
						</div>
						<div class="panel-body">
							<div id="chart1">
							
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="charts">
				<div class="col-sm-12 col-xs-12">
					<div class="panel panel-success">
						<div class="panel-heading">
							<h3 class="panel-title">本月支出统计图</h3>
						</div>
						<div class="panel-body">
							<div id="chart3">
							
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="charts">
				<div class="col-sm-12 col-xs-12">
					<div class="panel panel-success">
						<div class="panel-heading">
							<h3 class="panel-title">本月收支明细图</h3>
						</div>
						<div class="panel-body">
							<div id="" style="overflow:scroll;overflow-y:visible;width:100%">
								<div id="chart2" style="width:100%;overflow: auto;">
								
								</div>
							
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 图表部分...结束 -->
		
		</div>
		
	</body>
	<script>
		function addAni(obj){
			$("#" + obj).addClass("animated bounceInDown");
		}
		$(function () {
			var interval = 100;
			var t = setTimeout(function(){
				addAni("totalday");
				setTimeout(function(){
					addAni("totalweek");
					setTimeout(function(){
						addAni("totalmonth");
						setTimeout(function(){
							addAni("totalyear");
						},interval);
					},interval);
				},interval);
			
			},interval);
		
    
    $(document).ready(function () {
    	
    	// Build the chart
        $('#chart1').highcharts({
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45,
                    beta: 0
                }
            },
            title: {
                text: '本月支出分布图'
            },
            tooltip: {
        	    pointFormat: '<b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: '%',
                data: [
                    <#list pice as p>
                    	['${p.typeName}',${p.money}]
                    	<#if p_has_next>,</#if>
                    </#list>
                ]
            }]
        });
    	
    	
        $('#chart3').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: '本月支出统计图'
            },
            subtitle: {
                text: '统计本月支出项目的各自总和'
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {
                title: {
                    text: '金额:单位元'
                }

            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        format: '{point.y:.1f}元'
                    }
                }
            },

            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}元</b><br/>'
            },

            series: [{
                name: '总计',
                colorByPoint: true,
            data:[
            	<#list pice as p>
            	{name:'${p.typeName}',y:${p.money?c},drilldown:'${p.typeName}'}
            	<#if p_has_next>,</#if>
            	</#list>
            ]
          }]
        });
		
		$('#chart2').highcharts({
			chart: {
				type: 'line'
			},
			title: {
				text: '年度消费折线图'
			},
			subtitle: {
				text: '统计每个月的收支数据'
			},
			xAxis: {
// 				categories: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号','10号','11号','12号']
				categories: [<#list days as d>'${d}号'<#if d_has_next>,</#if></#list>]
			},
			yAxis: {
				title: {
					text: 'Temperature (°C)'
				}
			},
			tooltip: {
				enabled: false,
				formatter: function() {
					return '<b>'+ this.series.name +'</b><br/>'+this.x +': '+ this.y +'°C';
				}
			},
			plotOptions: {
				line: {
					dataLabels: {
						enabled: true
					},
					enableMouseTracking: false
				}
			},
			series: [{
				name: '收入',
// 				data: [1,2,3,4,5,6,7,8,9,10,11,12]
				data: [<#list month_line_income as inco>${inco.money?c}<#if inco_has_next>,</#if></#list>]
			}, {
				name: '支出',
// 				data: [1,2,3,4,5,6,7,8,9,10,11,12]
				data: [<#list month_line_cost as cost>${cost.money?c}<#if cost_has_next>,</#if></#list>]
			}]
		});
    });
    
});
	</script>
	
</html>